<template>
  <div class="tag-editor">
    <Tag v-for="item in tags" :key="item" :name="item" closable @on-close="handleClose">{{ item }}</Tag>
    <Button v-if="!showInput" icon="ios-add" type="dashed" size="small" @click="handleAdd">添加标签</Button>
    <div v-else>
      <Input v-model="tagName" size="small" class="tag-editor__input" />
      <Button type="primary" size="small" class="tag-editor__btn" @click="handleConfirm">确认</Button>
      <Button type="error" size="small" class="tag-editor__btn" @click="handleCancel">取消</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'm-tag-editor',

  props: {
    tags: Array
  },

  data () {
    return {
      showInput: false,
      tagName: ''
    };
  },

  methods: {
    handleClose () {},

    handleAdd () {
      this.showInput = true;
    },

    handleConfirm () {
      if (this.tagName) this.$emit('update:tags', [...this.tags, this.tagName]);
      this.handleCancel();
    },

    handleCancel () {
      this.tagName = '';
      this.showInput = false;
    }
  }
};
</script>

<style lang="scss">
.tag-editor {
  &__input {
    width: 200px;
    margin-right: 10px;
  }

  &__btn {
    margin-right: 10px;
  }
}
</style>
